<template>
  <div>
    <h2>承运合同添加</h2><br>
    <el-form ref="ruleFormRef" style="max-width: 600px" :rules="rules" :model="form" label-width="auto"
      class="demo-ruleForm" status-icon>
      <!-- <table> -->
      <tr>
        <td>
          <el-form-item label="合同标题：" style="font-size: 20px;float: right;" prop="contracTitle">
            <el-input v-model="form.contracTitle" style="width: 300px;height: 40px;" placeholder="请输入合同标题" clearable />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="承运单位：" style="font-size: 20px;float: right;" prop="carrierUnit">
            <el-input v-model="form.carrierUnit" style="width: 300px;height: 40px;" placeholder="请输入承运单位" clearable />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="承运负责人：" style="font-size: 20px;float: right;" prop="carrierName">
            <el-input v-model="form.carrierName" style="width: 300px;height: 40px;" placeholder="请输入承运负责人" clearable />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="线路：" style="font-size: 20px;float: right;" prop="line">
            <el-select v-model="form.line" style="width: 300px;height: 40px;" clearable>
              <el-option v-for="item in lines" :key="item.lineId" :label="item.lineName" :value="item.lineName" />
            </el-select>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="吨运价：" style="font-size: 20px;float: right;" prop="freight">
            <el-input v-model="form.freight" style="width: 300px;height: 40px;" placeholder="请输入吨运价" clearable />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="包车条件吨位：" style="font-size: 20px;float: right;">
            <el-input v-model="form.tonnage" style="width: 300px;height: 40px;" placeholder="请输入包车条件吨位" clearable />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="包车金额：" style="font-size: 20px;float: right;">
            <el-input v-model="form.charterAmount" style="width: 300px;height: 40px;" placeholder="请输入包车金额" clearable />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="经办人：" style="font-size: 20px;float: right;" prop="handlingName">
            <el-input v-model="form.handlingName" style="width: 300px;height: 40px;" placeholder="请输入经办人" clearable />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="签订时间：" style="font-size: 20px;float: right;" prop="signedTime">
            <el-date-picker v-model="form.signedTime" type="date" placeholder="请选择签订时间" clearable
              style="width: 300px;height: 40px;" value-format="YYYY-MM-DD" />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="合同金额：" style="font-size: 20px;float: right;">
            <el-input v-model="form.contractAmount" style="width: 300px;height: 40px;" placeholder="请输入合同金额"
              clearable />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <el-form-item label="合同标的或项目说明" style="font-size: 20px;width: 970px;height: 100px;float: right;">
            <el-input v-model="form.projectExplain" type="textarea"
              style="font-size: 20px;width: 970px;height: 100px;"></el-input>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <el-form-item label="合同主要条款/边更条款" style="font-size: 20px;width: 970px;height: 100px;float: right;">
            <el-input v-model="form.projectArticle" type="textarea"
              style="font-size: 20px;width: 970px;height: 100px;"></el-input>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td style="font-size: 20px;">合同文本(附件)：</td>
        <td>
          <el-upload v-model:file-list="fileList" class="upload-demo" :on-success="hhh"
            action="http://47.96.140.177:8000/ContractRead/api/ReadContract/UpdateFile" :on-change="handleChange">
            <el-button type="primary" style="width: 150px;height: 50px;">选取文件</el-button>
            <template #tip>
              <span>（单个附件最大支持20M，支持：PDF、Word、Excel、Txt格式）</span>
            </template>
          </el-upload>
        </td>
      </tr>
      <!-- </table><br><br> -->
    </el-form>
    <div style="margin-left: 200px">
      <tr>
        <el-button type="primary" @click="Approval" style="width: 150px;height: 50px;">提交审批</el-button>
        <el-button @click="Cancel" style="width: 150px;height: 50px;">取消</el-button>
        <el-button type="primary" @click="onSubmit(ruleFormRef)" style="width: 150px;height: 50px;">保存草稿</el-button>
      </tr>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, reactive, ref } from 'vue'

const form = reactive({
  contractNumber: 'CY202010080122',
  contracTitle: '',
  carrierName: '',
  carrierUnit: '',
  line: '',
  signedTime: '',
  freight: '',
  tonnage: '',
  charterAmount: '',
  handlingName: '',
  contractAmount: '',
  projectExplain: '',
  projectArticle: '',
  contractFile: '',
  contractStatus: 0,
  classify: 3
})
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import router from '@/router';
const fileList = ref([])
const hhh = (any: any) => {
  console.log(any)
  form.contractFile = any
  console.log(form.contractFile);

}
//上传文件
const handleChange = () => {
  console.log(form.contractFile)
}
const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      onSubmit1()
    } else {
      console.log('效验submit!', fields)
    }
  })
}
//保存草稿
const onSubmit1 = () => {
  console.log(form)
  console.log(form.signedTime);
  axios.post(`Contract/api/Contract/AddContracted`, form).then((ret) => {
    console.log(ret.data)
    if (ret.data.data == 1) {
      ElMessage.success('承运添加成功')
      ContractedTrackRecord()
      router.push('/CarrierList')
      return
    } else {
      ElMessage.error(ret.data.message)
    }
  })
}
onMounted(() => {
  GetAllline()
})
//线路
const lines: any = ref([])
const GetAllline = () => {
  axios.get('ContractRead/api/ReadContract/GetAllline', {
  }).then((ret) => {
    console.log(ret.data.data)
    lines.value = ret.data.data.plist
  })
}
//取消
const Cancel = () => {
  router.push('/CarrierList')
  alert('取消合同提交')
  return
}
//提交审批
const Approval = () => {
  console.log(form)
  form.contractStatus = 1
  axios.post(`Contract/api/Contract/AddContracted`, form).then((ret) => {
    console.log(ret.data)
    if (ret.data.data == 1) {
      ElMessage.success('承运审批添加成功')
      ContractedTrackRecord()
      router.push('/CarrierList')
      return
    } else {
      ElMessage.error(ret.data.message)
    }
  })
}
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
  contracTitle: [
    {
      required: true,
      message: '合同标题不能为空',
      trigger: 'change'
    },
  ],
  carrierUnit: [
    {
      required: true,
      message: '货主单位不能为空',
      trigger: 'change',
    },
  ],
  carrierName: [
    {
      required: true,
      message: '货主负责人不能为空',
      trigger: 'change',
    },
  ],
  line: [
    {
      required: true,
      message: '线路不能为空',
      trigger: 'change',
    },
  ],
  freight: [
    {
      type: 'date',
      required: true,
      message: '吨运价不能为空',
      trigger: 'change',
    },
  ],
  handlingName: [
    {
      required: true,
      message: '经办人不能为空',
      trigger: 'change',
    },
  ],
  signedTime: [
    {
      type: 'date',
      required: true,
      message: '签订时间不能为空',
      trigger: 'change',
    },
  ],
})

//跟踪记录（创建合同）
const TrackRecord = reactive({
  "contractNumber": "",
  "header": "创建合同",
  "carrier": "",
  "phone": "15939343226",
})
const ContractedTrackRecord = () => {
  TrackRecord.contractNumber = form.contractNumber
  TrackRecord.carrier = form.contractNumber

  axios.post(`Contract/api/TrackRecord/AddContractedTrackRecord`, TrackRecord).then((ret) => {
    console.log(ret.data)
  })
}
</script>

<style scoped></style>